<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在路上，</title>
    <link rel="stylesheet" href="css/index.css">
    <span id=localtime></span>
    <script type="text/javascript">
        function showLocale(objD)
        {
            var str,colorhead,colorfoot;
            var yy = objD.getYear();
            if(yy<1900) yy = yy+1900;
            var MM = objD.getMonth()+1;
            if(MM<10) MM = '0' + MM;
            var dd = objD.getDate();
            if(dd<10) dd = '0' + dd;
            var hh = objD.getHours();
            if(hh<10) hh = '0' + hh;
            var mm = objD.getMinutes();
            if(mm<10) mm = '0' + mm;
            var ss = objD.getSeconds();
            if(ss<10) ss = '0' + ss;
            var ww = objD.getDay();
            if  ( ww==0 )  colorhead="<font color=\"#FF0000\">";
            if  ( ww > 0 && ww < 6 )  colorhead="<font color=\"#373737\">";
            if  ( ww==6 )  colorhead="<font color=\"#008000\">";
            if  (ww==0)  ww="星期日";
            if  (ww==1)  ww="星期一";
            if  (ww==2)  ww="星期二";
            if  (ww==3)  ww="星期三";
            if  (ww==4)  ww="星期四";
            if  (ww==5)  ww="星期五";
            if  (ww==6)  ww="星期六";
            colorfoot="</font>"
            str = colorhead + yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + "  " + colorfoot;
            return(str);
        }
        function tick()
        {
            var today;
            today = new Date();
            document.getElementById("localtime").innerHTML = showLocale(today);
            window.setTimeout("tick()", 1000);
        }
        tick();
    </script>
    <embed     src="http://music.163.com/song/media/outer/url?id=1402238751"     width="0" height="0" autostart=true loop="true" ></embed>
    </head>
<body>
<div style="text-align:center;height: 230px;" >
 <h1></h1>
    <marquee><span style="font-weight: bolder;font-size: 25px;color: white;">往后余生，风雪是你，平淡是你，清贫是你，荣华是你，心底温柔是你，目光所至，也是你。</span></marquee></br>
    <div id="code" style="color:green;font-size: 20px;">远方除了遥远一无所有 </br>秋叶依昔轮回她的等待 </br>在这样的季节 </br>我站在蔚然的时空 </br>欣赏天地之间的那一袭背影</div>
    <script>
        Element.prototype.typewriter=function(a){
            var d = this,
                    c = d.innerHTML,
                    b = 0;
            d.innerHTML="";
            var e = setInterval(function() {
                var f = c.substr(b, 1);
                if (f == "<") {
                    b = c.indexOf(">", b) + 1
                } else {
                    b++
                }
                d.innerHTML=c.substring(0, b) + (b & 1 ? "_" : "");
                if (b >= c.length) {
                    clearInterval(e)
                }
            }, 150)
            return this

        }
        document.getElementById("code").typewriter();
    </script>

    <p id="btn" style="font-family:verdana;color:red;text-align:center;">
        获取抖音热搜</p>
        </div>
        <div style="text-align:center">
    <ul id="btny"></ul></div>
    <div class="site" >
        <div class="wrapper horizontal demo1">
            <ul class="container">

                <li class="cards_list">

                    <div class="img">

                        <img src="https://image.photocnc.com/aoaodcom/2023-02/15/202302150857438cf89a938033b5e30ea5e71b57eea6e5.jpg.h700.webp" alt="">

                    </div>
                 
                </li>

                <li class="cards_list">

                    <div class="img">

                        <img src="http://wx1.sinaimg.cn/mw690/978cbafbly1gg94ig1hwxj20jc0uumy7.jpg" alt="">

                    </div>
                    
                </li>
                <li class="cards_list">

                    <div class="img">

                        <img src="http://wx2.sinaimg.cn/mw690/978cbafbly1gg94hy48frj20u0140adj.jpg" alt="">

                    </div>
            
                </li>
                <li class="cards_list">

                    <div class="img">

                        <img src="http://wx3.sinaimg.cn/mw690/978cbafbly1gg94hukidgj20u0140jt8.jpg" alt="">

                    </div>
                  

                </li>
                <li class="cards_list">

                    <div class="img">

                        <img src="http://wx2.sinaimg.cn/mw690/978cbafbly1gg94hrxtw1j20u0140n0p.jpg" alt="">

                    </div>
                   
                </li>
                <li class="cards_list">

                    <div class="img">

                        <img src="http://wx1.sinaimg.cn/mw690/978cbafbly1gg94hpgitzj20tw13wjv4.jpg" alt="">

                    </div>
                    

                </li>

                <li class="cards_list">

                    <div class="img">

                        <img src="http://wx1.sinaimg.cn/mw690/978cbafbly1gg94hlifuxj20jc0uuwfe.jpg" alt="">

                    </div>
                    
                </li>
<!--                <li class="cards_list">

                    <div class="img">

                        <img src="img/p8.png" alt="">

                    </div>

                   

                </li>
                <li class="cards_list">

                    <div class="img">

                        <img src="img/p9.png" alt="">

                    </div>
                  

                </li>
                <li class="cards_list">

                    <div class="img">

                        <img src="img/p10.png" alt="">

                    </div>
                   
                </li>
                <li class="cards_list">
                    <div class="img">
                        <img src="img/p11.png" alt="">
                    </div>
                </li>-->
            </ul>

            <i class="btn-direct btn-left">
                <span class="shift-left"></span>
            </i>
            <i class="btn-direct btn-right">
                <span class="shift-right"></span>
            </i>
        </div>
    </div>

    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/carousel.js"></script>
    <script>

        $(document).ready(function () {

            $("div.wrapper").each(function (i, e) {
                $(e).attr("ondragstart", "return false");
            });

            var $demo1 = $("div.demo1"),
                $demo2 = $("div.demo2"),
                $demo3 = $("div.demo3"),
                $demo4 = $("div.demo4");

            console.time("t");

            var carousel1 = new Carousel($demo1.children("ul.container"), {
                opacity: .9,
                scale: [.9],
                transition: "400ms",
                switchBtn: $demo1.children("i.btn-direct"),
                isClickCard: true,
                isAuto: true,
                interval: 1500
            });
  
            var carousel2 = new Carousel($demo2.children("ul.container"), {
                direction:"vertical",
                scale: [.9],
                transition: "300ms",
                switchBtn: $demo2.children("i.btn-direct"),
                offsetDistance:40,
                isClickCard: true,
                isAuto: true,
                interval: 3000
            });

            var carousel3 = new Carousel($demo3.children("ul.container"), {
                transition: ".4s",
                switchBtn: $demo3.children("i.btn-direct"),
                offsetDistance: $demo3.find("ul.container>li").eq(0).outerWidth() + 20,
                isAuto: true,
            });

            var carousel4 = new Carousel($demo4.children("ul.container"), {
                scale: [.9, .8],
                transformOrigin: "center bottom",
                transition: "300ms",
                switchBtn: $demo4.children("i.btn-direct"),
                offsetDistance: 220,
                isClickCard: true,
                isAuto: true
            });
            console.timeEnd("t");

        })
    </script>

<script>
	 $("#btn").click(function () {
        $("#btny").show();
        $('#btny').text("");//点击清零
        $.get("http://api.tianapi.com/txapi/dyvideohot/index?key=17f3814c939f990ec54b8a44851878f0",
            function (data, status) {
                console.log(data);
                //$('#result').append(JSON.stringify(data)); //返回内容绑定到ID为result的标签
                /*var news1="";
                var shar="";*/

                for (var i = 0; i < 10; i++) {
                    var t = data.newslist[i].shareurl;
                    var t1 = data.newslist[i].title;
                    /* news1 +=(t1 +"<br/>");
                     shar +=(t + "<br/>");*/
                    $('#btny').append('<a href="' + t + '" target="_blank" ><span id="dy' + i + '"></span></a>' + '<br>');
                    $("#dy" + i).text(t1);
                    /* $("#ctx1").html(t1);*/
                    /*document.getElementById("dy").href=t;
                    $("#dyspan").html(t1);*/
                    /*str += '<a href="'+t+'" target="_blank" ><span id="dy'+i+'"></span></a>'+'<br>';*/
                    // $("#dy"+i).text(t1);
                }
                alert("状态码：" + data.code + "\n消息：" + "获取成功！" + "\n本次获取10条数据");
                /*  $("#ctx1").html(t1);*/
                /* if ($('#ctx').is(':hidden')){
                     $('#ctx1').show();
                 }else {
                     $('#ctx').hide();
                 }*/
                /*document.getElementById("a1").innerHTML=shar;
                document.getElementById("span1").innerHTML=shar;*/
                /*$("#ctx").html(news);*/
                /*document.getElementById("dy").href=news;
                $("#dyspan").html(news1);*/
                /*<li><a href="" target="_blank" id="dy"><span title=""></span></a></li>*/
            });
    });
</script>

</body>

</html>